<template>
    <div style="margin-bottom:56px">
        <v-toolbar dark color="primary" style="box-shadow:none;">
            <v-toolbar-title>个人中心</v-toolbar-title>
        </v-toolbar>
        <v-list two-line style="background:#4caf50;padding:10px 0px 20px 0">
          <v-list-tile @click="$router.push('/user/user-info')">
            <div style="margin-right:20px">
              <img :src=userInfo.avatar style="height:90px;width:90px;border-radius:50%">
            </div>
            <v-list-tile-content>
              <v-list-tile-title style="color:white;font-size:20px">{{userInfo.name}}</v-list-tile-title>
              <v-list-tile-sub-title style="color:white">{{userInfo.community}}</v-list-tile-sub-title>
            </v-list-tile-content>
            <v-list-tile-action>
              <v-btn icon ripple>
                <v-icon color="white" large>keyboard_arrow_right</v-icon>
              </v-btn>
            </v-list-tile-action>
          </v-list-tile>
        </v-list>
        <v-list style="padding:0">
          <v-list-tile>
            <v-list-tile-avatar>
              <v-icon color="primary">insert_emoticon</v-icon>
            </v-list-tile-avatar>
            <v-list-tile-content>
              <v-list-tile-title>积分</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-action>
              <span color="primary">200分</span>
            </v-list-tile-action>
          </v-list-tile>
        </v-list>
          <div style="height:30px;background:transparent"></div>
        <v-list>
          <div v-for="(value,index) in lists" v-bind:key=index>
          <v-list-tile @click="$router.push(value.link)">
            <v-list-tile-avatar>
              <v-icon color="primary">{{value.icon}}</v-icon>
            </v-list-tile-avatar>
            <v-list-tile-content>
              <v-list-tile-title>{{value.title}}</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-action>
              <v-icon color="primary" >keyboard_arrow_right</v-icon>
            </v-list-tile-action>
          </v-list-tile>
          <v-divider v-if="index + 1 < lists.length" :key="`divider-${index}`"></v-divider>
          </div>
        </v-list>
    </div>
</template>

<script>
export default {
    name:'person',
    data () {
      return {
        lists:[
          {icon:'star',title:'我的收藏',link:'/user/my-collect'},
          {icon:'add_circle',title:'我的发布',link:'user/my-release'},
          {icon:'shop',title:'团购',link:'user/my-group-purchase'},
          {icon:'mail',title:'消息',link:'message'},
        ],
        userInfo:{
          name:'张三',
          avatar:require('../../assets/avatar.jpg'),
          community:'国际软件学院',
        }
      }
    },
}
</script>

